<template>
	<view>
		<view class="padding">
			<view class="oil-card flex flex-direction padding text-white card4" v-show="bank" @click="$goto('/pages/mine/bank-add')">
				<view class="title margin-tb-sm">
					{{bank.bank_name}}
				</view>
				<view class="number margin-top-xl">
					{{bank.card_no}}
				</view>
			</view>
			
			<!-- <view class="oil-card flex flex-direction padding text-white card4">
				<view class="title margin-tb-sm">
					{{bank.bank_name}}
				</view>
				<view class="number margin-top-xl">
					{{bank.card_no}}
				</view>
			</view>
			
			<view class="oil-card flex flex-direction padding text-white card4">
				<view class="title margin-tb-sm">
					{{bank.bank_name}}
				</view>
				<view class="number margin-top-xl">
					{{bank.card_no}}
				</view>
			</view> -->
			
			<view class="oil-card flex justify-center align-center padding-lr text-white card3" @click="$goto('/pages/mine/bank-add')" v-show="!bank">
				<image style="width: 60rpx; height: 60rpx;display: block;" src="../../static/images/add.png" mode=""></image>
				<view class="margin-left-xs text-xl">绑定银行卡</view>
			</view>
			
			<!-- <view class="oil-card flex justify-center align-center padding-lr text-white card3" @click="$goto('/pages/mine/bank-add')" v-show="!bank">
				<image style="width: 60rpx; height: 60rpx;display: block;" src="../../static/images/add.png" mode=""></image>
				<view class="margin-left-xs text-xl">绑定支付宝</view>
			</view>
			
			<view class="oil-card flex justify-center align-center padding-lr text-white card3" @click="$goto('/pages/mine/bank-add')" v-show="!bank">
				<image style="width: 60rpx; height: 60rpx;display: block;" src="../../static/images/add.png" mode=""></image>
				<view class="margin-left-xs text-xl">绑定微信</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				card: false,
				add: false,
				bank: '',
			};
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.$u.get('/user/bank').then(res => {
					let data = res.data.result.account
					this.bank = data.bank_info
				})
			}
		}
	}
</script>

<style lang="scss">
	.oil-card {
		margin-bottom: 20rpx;
		height: 131rpx;
		background: rgba(238, 85, 68, 1);
		border-radius: 10rpx;
		background-size: 100% 100%;
		width: 100%;
	
		&.card1 {
			background-image: url(../../static/images/oc1.png);
		}
	
		&.card2 {
			background-image: url(../../static/images/oc2.png);
		}
	
		&.card3 {
			background-color: #8F8F8F;
		}
		
		&.card4 {
			height: 270rpx;
			font-size: 40rpx;
			letter-spacing: 2rpx;
			background-image: url(../../static/images/bankbg.png);
			
		}
	
		.info {
			display: flex;
			flex-flow: column;
			align-items: flex-end;
			letter-spacing: 4rpx;
		}
	}
</style>
